<template>
    <div style="widht:100% ; padding:1%">
        <el-space alignment="flex-start">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>人员列表</span>
                    </div>
                </template>
                <el-table :data="allItList" style="width: 100%">
                    <el-table-column prop="ryD_Name" label="人员姓名" width="100" />

                    <el-table-column fixed="right" label="操作" width="80">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="edit(scope)">
                                编辑类别
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>设置负责项（{{ RYD_UserName }}）</span>
                    </div>
                </template>
                <el-transfer v-model="value" filterable filter-placeholder="搜索" :data="data"
                    :titles="['未选择的类别', '当前负责类别']" @change="typeChange" />
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>当前站点类别</span>
                    </div>
                </template>
                <el-table :data="typeList" style="width: 100%">
                    <el-table-column fixed prop="ryD_DemandTypeNo" label="类别编号" width="80" />
                    <el-table-column prop="ryD_DemandTypeName" label="类别名称" width="100" />

                    <el-table-column fixed="right" label="操作" width="60">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <p>
                    <el-button class="mt-4" style="width: 100%" type="primary" @click="dialogFormVisible = true">新增类别
                    </el-button>
                </p>
            </el-card>
        </el-space>

    </div>

    <el-dialog v-model="dialogFormVisible" title="新增类别">
        <el-form :model="form" :rules="rules">
            <el-form-item label="类别名称" prop="RYD_DemandTypeName">
                <el-input v-model="form.RYD_DemandTypeName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addType()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { inject, reactive, ref } from 'vue'
import axios from '@/utils/axios';
import { ElLoading, ElMessageBox, ElNotification } from 'element-plus';

const data = ref([])
const value = ref([])
let RYD_UserId = inject('RYD_UserId');
let RYD_Company = '';
const typeList = ref([]);
const typeListLink = ref([]);
const dialogFormVisible = ref(false)
let allItList = ref();
let RYD_UserName = ref("无");
let selectRYD_UserId = "";
const rules = reactive({
    RYD_DemandTypeName: [
        { required: true, message: '请输入类别名称', trigger: 'blur' },
    ],
})
const form = reactive({
    RYD_DemandTypeName: ''
})
const edit = (res) => {
    selectRYD_UserId = res.row.ryD_Id;
    const selectRYD_Name = res.row.ryD_Name;
    RYD_UserName.value = selectRYD_Name;

    axios({
        method: 'Put',
        url: '/api/DemandType',
        data: {
            RYD_Company: RYD_Company,
            RYD_UserId: selectRYD_UserId
        }
    }).then(typeListLinkres => {

        typeListLink.value = typeListLinkres;
        var datas = [];
        typeList.value.forEach(e => {
            datas.push({
                label: e.ryD_DemandTypeName,
                key: e.ryD_DemandTypeNo,
                initial: e.ryD_DemandTypeName,
            })
        })
        data.value = new Array(...datas);
        value.value = [];
        typeList.value.forEach(element => {
            typeListLink.value.forEach(item => {
                if (element.ryD_DemandTypeNo == item.ryD_DemandTypeNo) {
                    let myLink = element;
                    value.value.push(myLink.ryD_DemandTypeNo);
                }
            })
        });
    })

}
const addType = () => {
    axios({
        method: 'Post',
        url: '/api/DemandType',
        data: {
            RYD_UserId,
            RYD_DemandTypeName: form.RYD_DemandTypeName,
            RYD_Company: RYD_Company
        }
    }).then(res => {
        if (res != 0 && res != "" && res != null) {
            typeList.value.push({
                ryD_UserId: selectRYD_UserId,
                ryD_DemandTypeName: form.RYD_DemandTypeName,
                ryD_DemandTypeNo: res
            })
            data.value.push({
                label: form.RYD_DemandTypeName,
                key: res,
                initial: form.RYD_DemandTypeName,
            })
            dialogFormVisible.value = false;
            ElNotification({
                title: '提示',
                message: '新增成功',
                type: 'success',
            })
        } else {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        }
    }).catch(() => {
        ElNotification({
            title: '提示',
            message: '失败',
            type: 'error',
        })
    })
}
const typeChange = (item1, item2, item3) => {
    if (item2 == 'right') {
        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'Post',
            url: '/api/DemandLink',
            data: {
                RYD_UserId:selectRYD_UserId,
                RYD_DemandTypeNo: item3,
                RYD_Company: RYD_Company
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '添加成功',
                    type: 'success',
                })
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }
        }).catch(() => {
            loading.close();
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        })
    }
    if (item2 == 'left') {

        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'put',
            url: '/api/DemandLink',
            data: {
                RYD_UserId:selectRYD_UserId,
                RYD_DemandTypeNo: item3,
                RYD_Company: RYD_Company
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '解除成功',
                    type: 'success',
                })
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }
        }).catch(() => {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        })
    }
}

const deleteRow = (index) => {
    let RYD_DemandTypeNo = typeList.value[index].ryD_DemandTypeNo;
    ElMessageBox.confirm(
        '确认删除这条类别吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {

        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'Delete',
            url: '/api/DemandType',
            data: {
                RYD_Company: RYD_Company,
                RYD_UserId: RYD_UserId,
                RYD_DemandTypeNo: RYD_DemandTypeNo
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                })
                typeList.value.splice(index, 1)
                data.value.splice(index, 1)
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }
        }).catch(() => {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
            loading.close();
        })

    })
        .catch(() => {

        })
}

axios({
    method: 'get',
    url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
}).then(res => {
    RYD_Company = res;

    axios({
        method: 'get',
        url: '/api/GetAllItName?RYD_Company=' + RYD_Company
    }).then(res => {
        if (res != '' && res != null) {
            allItList.value = res;
        }

    })
    axios({
        method: 'get',
        url: '/api/DemandType?RYD_Company=' + RYD_Company
    }).then(typeListres => {
        typeList.value = typeListres;

    })
})
</script>
  